import React from "react";
import SearchHeader from "./SearchHeader";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import "../style/style.less";
import ThePagination from "@/components/ThePagination";
import TheQueryForm from '@/components/TheQueryForm';
import { apiGetCommodityList } from '@/request/commodity'
import { apiGetStoreInfoPage } from '@/request/store'
import { apiGetGoodsInfoPage, apiGetGoodsInfoPageOnBannerConfigPage } from '@/request/mallManagement'
import { apiServicePage } from '@/request/services'
import { apiServiceClassifyList } from "@/request/services";

class List extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      searchValue: {},
      type: '0',
      searchOption: {
        goodsId: [
          {
            field: 'goodsId',
            label: '商品Id',
            placeholder: '请输入',
            required: false,
            rules: [{ pattern: /^[0-9]+$/, message: '只能输入数字' }],
            type: 'Input',
          },
        ],
        productId: [
          {
            field: 'productId',
            label: '商品Id',
            placeholder: '请输入',
            required: false,
            rules: [{ pattern: /^[0-9]+$/, message: '只能输入数字' }],
            type: 'Input',
          },
        ]
      }
    };
  }

  async componentDidMount() {
    await this.getData()
  }
  choose(type, typeId, typeName, storeId, storeName) {
    // console.log(type, typeId, typeName, storeId, storeName)
    this.props.getList({ type, typeId, typeName, storeId, storeName })

  }
  getData = async () => {
    // console.log(this.props)
    const type = this.props.radiotype
    const { pageData, searchValue } = this.state
    switch (type) {
      case '2':
        this.setState({
          columns: [
            {
              title: "店铺名称",
              dataIndex: "storeName",
              key: "storeName",
            },
            {
              title: "操作",
              fixed: "right",
              width: 300,
              render: (text, render) => {
                return (
                  <div>
                    <TheButton onClick={() => this.choose(type, render.storeId, render.storeName)}>选择</TheButton>
                  </div>
                );
              },
            },
          ],
        })
        let mallres = await apiGetStoreInfoPage({ ...pageData, ...searchValue, approvalStatus: 'T', storeStatus: 'Y' })
        if (mallres.code === 0 && mallres.data) {
          this.setState({
            dataSource: mallres.data,
            pageData: { pageNo: mallres.pageNo, pageSize: mallres.pageSize },
            total: mallres.totalCount,
            type: type
          })
        }
        break;
      case '3':
        this.setState({
          columns: [
            {
              title: "商品名称",
              dataIndex: "goodsName",
              key: "goodsName",
              render: (text, record) => {
                return <div style={{ width: 200, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{record.goodsName}</div>
              }
            },
            {
              title: "所属类目",
              dataIndex: "goodsClassifyName",
              key: "goodsClassifyName",
            },
            {
              title: "所属店铺",
              dataIndex: "storeName",
              key: "storeName",
            },
            {
              title: "操作",
              fixed: "right",
              width: 300,
              render: (text, render) => {
                return (
                  <div>
                    <TheButton onClick={() => this.choose(type, render.goodsId, render.goodsName, render.storeId, render.storeName)}>选择</TheButton>
                  </div>
                );
              },
            },
          ],
        })
        let storeres = await apiGetGoodsInfoPageOnBannerConfigPage({ ...pageData, ...searchValue, reviewStatus: 'T', storeStatus: 'Y', goodsStatus: 'Y' })
        if (storeres.code === 0 && storeres.data) {
          this.setState({
            dataSource: storeres.data,
            pageData: { pageNo: storeres.pageNo, pageSize: storeres.pageSize },
            total: storeres.totalCount,
            type: type
          })
        }
        break;
      case '4':
        this.setState({
          columns: [
            {
              title: "店铺名称",
              dataIndex: "storeName",
              key: "storeName",
            },
            {
              title: "操作",
              fixed: "right",
              width: 300,
              render: (text, render) => {
                return (
                  <div>
                    <TheButton onClick={() => this.choose(type, render.storeId, render.storeName)}>选择</TheButton>
                  </div>
                );
              },
            },
          ],
        })
        let comres = await apiGetStoreInfoPage({ ...pageData, ...searchValue, approvalStatus: 'T', storeStatus: 'Y', businessCategory: 0 })
        if (comres.code === 0 && comres.data) {
          this.setState({
            dataSource: comres.data,
            pageData: { pageNo: comres.pageNo, pageSize: comres.pageSize },
            total: comres.totalCount,
            type: type
          })
        }
        break;
      case '14':
        this.setState({
          columns: [
            {
              title: "店铺名称",
              dataIndex: "storeName",
              key: "storeName",
            },
            {
              title: "操作",
              fixed: "right",
              width: 300,
              render: (text, render) => {
                return (
                  <div>
                    <TheButton onClick={() => this.choose(type, render.storeId, render.storeName)}>选择</TheButton>
                  </div>
                );
              },
            },
          ],
        })
        let hotel = await apiGetStoreInfoPage({ ...pageData, ...searchValue, approvalStatus: 'T', storeStatus: 'Y', businessCategory: 1 })
        if (hotel.code === 0 && hotel.data) {
          this.setState({
            dataSource: hotel.data,
            pageData: { pageNo: hotel.pageNo, pageSize: hotel.pageSize },
            total: hotel.totalCount,
            type: type
          })
        }
        break;
      case '15':
        this.setState({
          columns: [
            {
              title: "店铺名称",
              dataIndex: "storeName",
              key: "storeName",
            },
            {
              title: "操作",
              fixed: "right",
              width: 300,
              render: (text, render) => {
                return (
                  <div>
                    <TheButton onClick={() => this.choose(type, render.storeId, render.storeName)}>选择</TheButton>
                  </div>
                );
              },
            },
          ],
        })
        let hospital = await apiGetStoreInfoPage({ ...pageData, ...searchValue, approvalStatus: 'T', storeStatus: 'Y', businessCategory: 2 })
        if (hospital.code === 0 && hospital.data) {
          this.setState({
            dataSource: hospital.data,
            pageData: { pageNo: hospital.pageNo, pageSize: hospital.pageSize },
            total: hospital.totalCount,
            type: type
          })
        }
        break;
      case '16':
        this.setState({
          columns: [
            {
              title: "店铺名称",
              dataIndex: "storeName",
              key: "storeName",
            },
            {
              title: "操作",
              fixed: "right",
              width: 300,
              render: (text, render) => {
                return (
                  <div>
                    <TheButton onClick={() => this.choose(type, render.storeId, render.storeName)}>选择</TheButton>
                  </div>
                );
              },
            },
          ],
        })
        let hairdress = await apiGetStoreInfoPage({ ...pageData, ...searchValue, approvalStatus: 'T', storeStatus: 'Y', businessCategory: 0 })
        if (hairdress.code === 0 && hairdress.data) {
          this.setState({
            dataSource: hairdress.data,
            pageData: { pageNo: hairdress.pageNo, pageSize: hairdress.pageSize },
            total: hairdress.totalCount,
            type: type
          })
        }
        break;
      case '5':
        this.setState({
          columns: [
            {
              title: "商品名称",
              dataIndex: "productName",
              key: "productName",
              render: (text, record) => {
                return <div style={{ width: 200, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{record.productName}</div>
              }
            },
            {
              title: "所属类目",
              dataIndex: "productClassifyName",
              key: "productClassifyName",
            },
            {
              title: "所属商家",
              dataIndex: "storeName",
              key: "storeName",
            },
            {
              title: "操作",
              fixed: "right",
              width: 300,
              render: (text, render) => {
                return (
                  <div>
                    <TheButton onClick={() => this.choose(type, render.productId, render.productName, render.storeId, render.storeName)}>选择</TheButton>
                  </div>
                );
              },
            },
          ],
        })
        let res = await apiGetCommodityList({ ...pageData, ...searchValue, reviewStatus: 'T', storeStatus: 'Y', productStatus: 'Y' })
        if (res.code === 0 && res.data) {
          this.setState({
            dataSource: res.data,
            pageData: { pageNo: res.pageNo, pageSize: res.pageSize },
            total: res.totalCount,
            type: type
          })
        }
        break;
      case '6':
        this.setState({
          columns: [
            {
              title: "服务名称",
              dataIndex: "serviceName",
              key: "serviceName",
              render: (text, record) => {
                return <div style={{ width: 200, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{record.serviceName}</div>
              }
            },
            {
              title: "所属商家",
              dataIndex: "storeName",
              key: "storeName",
            },
            {
              title: "操作",
              fixed: "right",
              width: 300,
              render: (text, render) => {
                return (
                  <div>
                    <TheButton onClick={() => this.choose(type, render.serviceId, render.serviceName, render.storeId, render.storeName)}>选择</TheButton>
                  </div>
                );
              },
            },
          ],
        })
        // type,render.serviceId,render.serviceName,render.storeId,render.storeName
        let serres = await apiServicePage({ ...pageData, ...searchValue, approvalStatus: 'T', storeStatus: 'Y', serviceStatus: 'Y' })
        if (serres.code === 0 && serres.data) {
          this.setState({
            dataSource: serres.data,
            pageData: { pageNo: serres.pageNo, pageSize: serres.pageSize },
            total: serres.totalCount,
            type: type,
          })
          // console.log(this.state.type)
        }
        break;
      case '9':
        this.setState({
          columns: [
            {
              title: "服务类目名称",
              dataIndex: "serviceClassifyName",
              key: "serviceClassifyName",
              render: (text, record) => {
                return <div style={{ width: 200, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>{record.serviceClassifyName}</div>
              }
            },
            {
              title: "操作",
              fixed: "right",
              width: 300,
              render: (text, render) => {
                return (
                  <div>
                    <TheButton onClick={() => this.choose(type, render.serviceClassifyId, render.serviceClassifyName)}>选择</TheButton>
                  </div>
                );
              },
            },
          ],
        })
        // type,render.serviceId,render.serviceName,render.storeId,render.storeName
        let category = await apiServiceClassifyList()
        if (category.code === 0 && category.data) {
          this.setState({
            dataSource: category.data,
            total: category.totalCount,
            type: type,
          })
          // console.log(this.state.type)
        }
        break;
      default:
        break;
    }

    // let res = await apiGetCommodityList({ ...pageData, ...searchValue, reviewStatus: 'T' })
    // if (res.code === 0 && res.data) {
    //   this.setState({ dataSource: res.data, pageData: { pageNo: res.pageNo, pageSize: res.pageSize }, total: res.totalCount })
    // }
  }
  getValue = (value) => {
    this.setState({ searchValue: value, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }
  onReset = () => {
    this.setState({ searchValue: {}, pageData: { pageNo: 1, pageSize: 10 } }, () => {
      this.getData()
    })
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  };
  render() {
    const {
      columns,
      dataSource,
      pageData: { pageNo, pageSize },
      total,
      type,
      searchOption
    } = this.state;
    return (
      <div className={"p-layout-box commodity-content"}>
        {/* <SearchHeader type={type} history={this.props.history} getValue={this.getValue} /> */}
        <div className="p-layout-content-pagination">
          {(type === '3' || type === '5') && <TheQueryForm
            ref={(ref) => this.queryFormRef = ref} show={true} option={type === "3" ? searchOption.goodsId : searchOption.productId}
            onGetValues={(values) => this.getValue(values)}
            onReset={() => this.onReset()}
          />}
          <TheTable
            scroll={{ x: "max-content", y: '63vh' }}
            columns={columns}
            dataSource={dataSource}
          />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
      </div>
    );
  }
}

export default List;
